<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="../css/login.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div class="login-box">
    <form class="form">
      <p class="quc-tab-list"><span>短信登录</span><span>|</span><span>360账号登录</span></p>
      <label>
        <input class="username" type="text" placeholder="手机号/用户名/邮箱">
      </label>
      <label>
        <input class="password" type="text" placeholder="密码">
      </label>
      <span class="error">登录密码错误，请重新输入</span>
      <button>登录</button>
      <p class="register"><a href="./register.html">快速注册</a><a href="#">找回密码</a></p>
    </form>
  </div>
  <!-- <script src="../js/login.js"></script> -->
  <script>
    // 一套登录的逻辑
const form = document.querySelector('form')
const nameInp = document.querySelector('.username')
const pwdInp = document.querySelector('.password')
const errBox = document.querySelector('.error')


form.addEventListener('submit', e => {
  e.preventDefault()

  // 采集信息
  const name = nameInp.value
  const pwd = pwdInp.value

  // 验证
  if (!name || !pwd) return alert('请完整填写表单 ! O(∩_∩)O哈哈~')

  // 发送请求
  const xhr = new XMLHttpRequest()

  xhr.open('POST', 'http://localhost:8888/users/login')

  xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)

    if (res.code === 0) {
      errBox.style.display = 'block'
      return
    }

    // 用户 id 信息, 表示当前登录用户的身份
    // token 信息, 表示登录成功以后得到的凭证, 证明你登录的信息
    // 但是这两个信息, 只能在当前 login.html 页面拿到, 别的页面没有
    // 为了让别的页面也可以使用这两个信息, 所以在这里存储区到 lcoalStorage 内
    window.localStorage.setItem('id', res.user.id)
    window.localStorage.setItem('token', res.token)

    window.location.href = './index.html'
  }

  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  xhr.send(`username=${ name }&password=${ pwd }`)
})

  </script>
</body>
</html>